<template>  
    <div class="my-appointment">      
      <div class="appointment-list" v-show="ing_arr.length > 0 && ing_arr">
        <div class="item" v-for="(item, index) in ing_arr" :key="index" @click="router({path: './storeDetails', query:{storeId: item.door_store.id}})">
          <img :src="item.door_store.img" class="store-img" alt="">
          <div class="cons">
            <p class="store-name">{{item.door_store.title}}</p>        
            <p class="store-address">
              <span>{{(item.door_store.distance > 1000) ? parseInt(item.door_store.distance/1000)+"km+" : parseInt(item.door_store.distance)+'m'}}</span>
              <span class="address">{{item.door_store.address}}</span>
            </p>
            <div class="time">
              <img src="@/assets/yuyue1.png" alt="">
              <span>{{item.create_time | formatDate}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="appointment-list">
        <p class="title">预约记录</p>
        <div class="item" v-for="(item, index) in ed_arr" :key="index" v-if="item.door_store" @click="router({path: './storeDetails', query:{storeId: item.door_store.id}})">
          <img :src="item.door_store.img" class="store-img" alt="">
          <div class="cons">
            <p class="store-name">{{item.door_store.title}}</p>        
            <p class="store-address">
              <span>{{(item.door_store.distance > 1000) ? parseInt(item.door_store.distance/1000)+"km+" : parseInt(item.door_store.distance)+'m'}}</span>
              <span class="address">{{item.door_store.address}}</span>
            </p>
            <div class="time">
              <img src="@/assets/yuyue2.png" alt="">
              <span>{{item.create_time | formatDate}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/javascript">
  import { getMyPre } from '@/api/api';
  import { formatDate } from '@/util/date'
  export default {
    components: {
    },
    filters: {
      formatDate(time) {
        if(!time){return;}
        let date = new Date(time*1000);
        return formatDate(date, 'yyyy年MM月dd日 hh:mm');
      }
    },
    data () {
      return {
        list: ['1'],
        ing_arr: [], //预约中的
        ed_arr: [], //预约记录
      }
    },
    created () {
      this.get_my_pre()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.tabIndex = index
      },
      get_my_pre() {
        var dataJson = {
          uid: sessionStorage.getItem('uid'),
          lat: sessionStorage.getItem('lat'),
          lon: sessionStorage.getItem('lon'),
        }
        getMyPre(dataJson).then((res) => {
          this.ing_arr = res.data.info.ing_arr
          this.ed_arr = res.data.info.ed_arr
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>  
.my-appointment 
  .appointment-list
    padding 1.5rem 0
    &:first-child
      border-bottom 1rem solid #f5f5f5
    .title
      line-height 2.7rem
      font-size 1.8rem
      color #333
      font-weight bold
      padding-left 1.5rem
      padding-top 1.8rem
    .item
      padding 1.5rem
      display flex
      position relative
      padding-bottom 1rem
      &:first-child
        padding-top 0
      .store-img
        width 16rem
        height 12rem
        border-radius .4rem
        margin-right 1.5rem
        object-fit cover
      .store-name
        font-size 1.6rem
        color #333
        font-weight bold
        line-height 2.7rem
        width calc(100vw - 20.7rem)
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      .store-address
        font-size 1.2rem
        line-height 2.7rem
        color #999
        position relative
        .address
          position absolute
          margin-left 1rem
          padding-left 1rem
          width calc(100vw - 28.7rem)
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          &:after
            position absolute
            left 0
            content ""
            border-left 1px solid #e6e6e6
            height 1rem
            top .85rem
      .time
        position absolute
        bottom 1.5rem
        img
          display inline-block
          vertical-align middle
          width 3.6rem
        span
          display inline-block
          vertical-align middle
          font-size 1.2rem
          font-weight bold
          color #FE9700
      .time.over 
        span
          color #999

</style>